import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './routes'
import { scrollReset } from './routes'
import './index.css'

// 添加移动端滚动优化
const enableMobileScrolling = () => {
  // 防止iOS Safari的弹性滚动行为干扰应用内滚动
  document.addEventListener('touchmove', (e) => {
    if (e.touches.length > 1) {
      e.preventDefault();
    }
  }, { passive: false });

  // 添加iOS绑定事件
  document.addEventListener('gesturestart', (e) => {
    e.preventDefault();
  });
  
  // 防止双击缩放
  let lastTouchEnd = 0;
  document.addEventListener('touchend', (e) => {
    const now = Date.now();
    if (now - lastTouchEnd <= 300) {
      e.preventDefault();
    }
    lastTouchEnd = now;
  }, { passive: false });
};

// 添加全局导航完成后的滚动重置
const setupNavigationEvents = () => {
  // 确保所有可能影响滚动的HTML元素样式都被重置
  const resetAllScrollStyles = () => {
    // 重置文档和body的overflow样式
    document.documentElement.style.removeProperty('overflow');
    document.body.style.removeProperty('overflow');
    document.body.style.height = '';
    document.body.style.position = '';
    document.documentElement.style.height = '';
    document.documentElement.style.position = '';
    
    // 调用routes中的scrollReset函数
    scrollReset();
  };
  
  // 监听所有可能的导航事件
  window.addEventListener('popstate', resetAllScrollStyles);
  window.addEventListener('hashchange', resetAllScrollStyles);
  
  // 定期检查body的overflow，防止被卡住
  setInterval(() => {
    // 检查body或html是否有hidden overflow
    if (document.body.style.overflow === 'hidden' || 
        document.documentElement.style.overflow === 'hidden') {
      // 检查是否有模态框或弹出层
      const modalOpen = document.querySelector('.fixed.inset-0');
      // 如果没有模态框但overflow仍然是hidden，则重置它
      if (!modalOpen) {
        resetAllScrollStyles();
      }
    }
  }, 3000); // 每3秒检查一次
};

// 只在移动设备上应用这些优化
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  enableMobileScrolling();
}

// 设置全局导航事件
setupNavigationEvents();

ReactDOM.createRoot(document.getElementById('root')!).render(
  // <React.StrictMode>
    <RouterProvider router={router} />
  // </React.StrictMode>,
)
